@charset "UTF-8";


$font-size:40px;
@function r($px){
    @return $px/$font-size * 1rem;
}


#web{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/resultbg.jpg) no-repeat center;
    background-size: cover;
    overflow: hidden;
    .state-wrap{
        width: 100%;
        height: r(1137px);
        background: url(../img/resultbg2.png) no-repeat center;
        background-size: 100%;
        margin-top: r(70px);
    }
}



//抽奖结果
.lottery-result{
    position: absolute;
    top: r(64px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: r(686px);
    height: r(475px);
    .success{
        display: block;
        .result-text{
            position: relative;
            top: r(-360px);
            width: r(346px);
            height: r(65px);
            background: url(../img/result-tit1.png) no-repeat center;
            background-size: 100%;
            margin: r(75px) auto 0;
            transform-origin: left;
            transform: rotate(-15deg);
            transition: transform .5s ease-in-out;
        }
        .result{
            display: none;
            width: 100%;
            text-align: center;
            margin-top: r(48px);
            div{
                font-size: r(100px);
                font-weight: bold;
                color: #de2723;
            }
            p{
                font-size: r(32px);
                color: #666666;
//              margin-top: r(4px);
            }
        }
    }
    .defeat{
        display: none;
        .result-text{
            position: relative;
            top: r(-360px);
            width: r(236px);
            height: r(56px);
            background: url(../img/result-tit2.png) no-repeat center;
            background-size: 100%;
            margin: r(80px) auto 0;
            transform: rotate(-15deg);
            transition: transform .5s ease-in-out;
        }
        .result{
            display: none;
            width: 100%;
            text-align: center;
            margin-top: r(130px);
            font-size: r(32px);
            font-weight: bold;
            color: #666666;
        }
        
    }
    .active{
        .result-text{
            top: r(-360px);
            transform: rotate(-15deg);
        }
        .result{
            display: none;
        }
    }
}

//抽奖说明
.lottery-state{
    position: absolute;
    top: r(400px);
    left: 0;
    width: 100%;
    height: r(795px);
    .lottery-btn,.lottery-sharenext{
        width: r(630px);
        height: r(80px);
        line-height: r(80px);
        border: 1px solid #ffffff;
        -webkit-border-radius: r(40px);
        -moz-border-radius: r(40px);
        border-radius: r(40px);
        font-size: r(36px);
        color: #fff;
        text-align: center;
        margin:r(230px) auto 0;
        &.active{
            background-color: #FFD202;
            border-color: #FFD202;
        }
    }
    .lottery-sharenext{
        display: none;
        background-color: #FFD202;
        border-color: #FFD202;
    }
    .state{
        width: r(630px);
        height: r(303px);
        background: url(../img/result-state.png) no-repeat center;
        background-size: 100%;
        margin: r(60px) auto 0;
    }
}





//分享指示框
.share-wrap{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 99;
    .share-view{
        position: absolute;
        top: r(20px);
        right: r(80px);
        width: r(540px);
        height: r(367px);
        background: url(../img/result-share.png) no-repeat center;
        background-size: 100%;
    }
    .share-text{
        font-size: r(36px);
        color: #ffffff;
        text-align: center;
        margin-top: r(520px);
    }
}